<template>
  <div class="mobile-navbar mobile-only" v-if="isMobile">
    <div class="status-bar safe-area-inset-top"></div>
    <div class="navbar-content">
      <div class="back-btn" @click="handleBack" v-if="showBack">
        <el-icon><ArrowLeft /></el-icon>
      </div>
      <div class="title">{{ title }}</div>
      <div class="menu-btn" @click="handleMenu" v-if="showMenu">
        <el-icon><More /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, More } from '@element-plus/icons-vue'

interface Props {
  title?: string
  showBack?: boolean
  showMenu?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '橘子小说',
  showBack: true,
  showMenu: false
})

const emit = defineEmits<{
  back: []
  menu: []
}>()

const router = useRouter()
const isMobile = ref(false)

// 检测是否为移动端
const checkMobile = () => {
  const userAgent = navigator.userAgent
  const mobileKeywords = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
  isMobile.value = mobileKeywords.test(userAgent) || window.innerWidth <= 768
}

// 处理返回按钮
const handleBack = () => {
  emit('back')
  if (window.history.length > 1) {
    router.go(-1)
  } else {
    router.push('/')
  }
}

// 处理菜单按钮
const handleMenu = () => {
  emit('menu')
}

onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})
</script>

<style scoped>
.mobile-navbar {
  --status-bar-height: 20px;
}

/* iOS设备状态栏适配 */
@supports (padding-top: env(safe-area-inset-top)) {
  .mobile-navbar {
    --status-bar-height: env(safe-area-inset-top);
  }
}
</style> 